<template>
    <div id="root">
        <PageTitle>添加商品</PageTitle>
        <div class="pages-top pages-scroll-two">
            
            
            <Group>
                <div id="swiper">
                    <Swiper height="80vw" v-if="ImglistShow" :list="Imglist"></Swiper>
                    <button @click="deleteClick" v-if="ImglistShow" id="delete">删除所有商品图，重新选择</button>
                </div>
                <XInput title="商品名称" placeholder="必填" required v-model="goodsName"></XInput>
                <XInput title="商品描述" placeholder="必填" required v-model="description"></XInput>
                <XInput title="商品价格" placeholder="必填" required v-model.number="price"></XInput>
                <XInput title="净含量在" placeholder="必填" required v-model.number="netContent"></XInput>
                <XInput title="存储方式" placeholder="必填" required v-model="storage"></XInput>
                <Cell title="选择分类"></Cell>
                <Picker :data="classifyDis" :fixed-columns="2" :columns="2" v-model="classifyValue"></Picker> 
                <PopupPicker  title="等级" :data="goodsClassList" v-model="goodsClass" value-text-align="center" ></PopupPicker>
                <PopupPicker  title="用途" :data="useList" v-model="use" value-text-align="center" ></PopupPicker>
                <PopupPicker  title="年份" :data="yearList" v-model="year" value-text-align="center" ></PopupPicker>
                <PopupPicker  title="香型" :data="odorList" v-model="odor" value-text-align="center" ></PopupPicker>
                <PopupPicker  title="采摘季节" :data="seasonList" v-model="season" value-text-align="center" ></PopupPicker>
                
                
                <div id="img-list" ref="imglist">
                    <div ref="imgctrl"></div>
                    <label for="file-selector" class="file-label" ref="fileLabel">
                        <img  class="file-img" src="../../static/icon/上传图片.svg">
                        <p>点击上传商品图片:</p>
                        </label>
                    <input type="file" id="file-selector" accept="image/*" multiple @change="chooseImage">
                    



                    <label for="file-selector1" class="file-label" ref="fileLabel">
                        <img  class="file-img" src="../../static/icon/上传图片.svg">
                        <p>点击上传商品介绍:</p>
                        </label>
                    <input type="file" id="file-selector1" accept="image/*" multiple @change="selectImage">
                </div>
                
            </Group>

            <button @click="commitClick" class="button-css">提交</button>
        </div>
    </div>
</template>
<script>
import PageTitle from "../components/PageTitle.vue";
import {Group,XInput,Selector,PopupPicker,Swiper,Picker,Cell} from "vux";
import {mapState} from "vuex";
export default {
    components:{PageTitle,Group,XInput,Selector,PopupPicker,Swiper,Picker,Cell},
    mounted(){
        this.$store.dispatch("requestClassify");
    },
    data(){
        return {
            goodsName:"",
            description:"",
            price:"",
            netContent:"",
            goodsClass:["一级"],
            goodsClassList:[["一级","二级","其它","特级"]],
            use:["自饮"],
            useList:[["自饮","送礼(简装礼盒)","送礼(精装礼盒)"]],
            year:["2005以前"],
            yearList:[["2014年","2015年","2016年","2017年"]],
            season:["春茶"],
            seasonList:[["春茶","秋茶"]],
            odor:["浓香型"],
            odorList:[["浓香型","清香型","韵香型","陈年老茶"]],
            storage:"",
            swiperFiles:[],
            Imglist:[],
            ImglistShow:false,
            introduceFiles:[],
            introduceAll:[],
            imgUrl:[],
            classifyValue:[]
        }
    },
    computed:{
        ...mapState([
            "classify",
        ]),
        classifyDis:function(){
            var choose = [];
            this.classify.forEach((e)=> {
                var arr = {};
                arr.name = e.classifyName;
                arr.value = e.classifyName;
                arr.parent = 0;
                choose.push(arr);
                arr = {};
                e.tea.forEach((t)=> {
                    arr.name = t.teaName;
                    arr.value = t.teaName;
                    arr.parent = e.classifyName;
                    choose.push(arr);
                    arr = {};
                });
            });
            // console.log(this.classify)
            return choose;
        }
    },
    methods:{
        chooseImage(e){
            if(e.target.files.length>0){
                this.ImglistShow =true
            }else{
                this.ImglistShow =false;
            }
            for(var i = 0;i<e.target.files.length;i++){
                this.swiperFiles.push(e.target.files[i]);
                var url = URL.createObjectURL(e.target.files[i]);
                this.Imglist.push({img:url});
            }
        },
        deleteClick(){
            this.swiperFiles = [];
            this.Imglist = [];
            this.ImglistShow = false;
        },
        createImg(){
            this.$refs.imgctrl.textContent =null;
            this.imgUrl.map((j,i)=>{
                
                var div = document.createElement("div");
                var btn = document.createElement("button");
                var img = document.createElement("img");
                btn.onclick=(e)=>{
                    // console.log(i)
                    this.$refs.imgctrl.removeChild(e.target.parentElement);
                    this.introduceFiles.splice(i,1);
                    this.imgUrl.splice(i,1);
                    this.createImg();
                    // console.log(j);
                    // console.dir(this.introduceFiles);
                }
                div.appendChild(img);
                div.appendChild(btn);
                img.style.width = "100%";
                btn.textContent = "删除";
                div.style.position = "relative";
                btn.style.position = "absolute";
                btn.style.top = "0";
                btn.style.right = "0";
                btn.style.backgroundColor = "#ff3600";
                img.src  =j;
                this.$refs.imgctrl.appendChild(div);
            })
        },
        selectImage(e){
            for(var i=0;i<e.target.files.length;i++){
                this.introduceFiles.push(e.target.files[i]);
                this.imgUrl.push(URL.createObjectURL(e.target.files[i]));
            };
            this.createImg();
            
        },
        commitClick(){
            var data = new FormData();
            this.swiperFiles.map((e)=>{
                data.append("goods",e);
            });
            this.introduceFiles.map((e)=>{
                data.append("pic",e);
            })
            data.append("goodsName",this.goodsName);
            data.append("description",this.description);
            data.append("price",this.price);
            data.append("netContent",this.netContent);
            data.append("goodsClass",this.goodsClass);
            data.append("use",this.use);
            data.append("year",this.year);
            data.append("odor",this.odor);
            data.append("season",this.season);
            data.append("storage",this.storage);
            data.append("classify",this.classifyValue)
            this.$store.dispatch("requestAddShopping",data);
            // console.dir(this.introduceFiles);
        }
    }
}
</script>
<style scoped>
    #root{
        background-color: #f4f4f4;
        z-index: 20;
    }
    .file-img{
        width: 14vw;
        height: 14vw;
        margin-top: 4vw;
    }
    .file-label{
        display: inline-block;
        width: 28vw;
        height: 28vw;
        background-color: #999999;
        text-align: center;
        font-size: 3.36vw;
        vertical-align: top;
        
        
    }
    #file-selector{
        display: none;
    }
    #file-selector1{
        display: none;
    }
    #img-list{
        text-align: center;
    }
    #swiper{
        position: relative;
    }
    #delete{
        position: absolute;
        width: 50vw;
        background-color: #FF3600; 
        right: 0;
        top: 0;
    }
</style>